<!-- eslint-disable vue/multi-word-component-names -->
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useLoginStore } from '@/stores/modudels/loginStore'

const router = useRouter()

const login_form = ref({
  name: '',
  password: ''
})

const loginStore = useLoginStore()
const nameAndPasswordLogin = async () => {
  try {
    const result = await loginStore.nameAndPasswordLogin({
      name: login_form.value.name,
      password: login_form.value.password
    })
    console.log('login.vue result:', result)
    console.log(router.currentRoute.value.query)
    console.log(Object.keys(router.currentRoute.value.query).length)
    if (Object.keys(router.currentRoute.value.query).length != 0) {
      console.log('values:', typeof Object.values(router.currentRoute.value.query)[0])
      router.push(Object.values(router.currentRoute.value.query)[0])
    } else {
      router.push('/')
    }
  } catch (error) {
    // 显示通用错误提示
    console.log('login.vue error:', error)
    ElMessage({
      message: error.msg,
      type: 'error',
      plain: true,
      duration: 3000
    })
  }
}

const rules = ref({
  name: [
    { required: true, trigger: 'blur', message: '用户名不能为空' },
    { min: 3, max: 20, trigger: 'blur', message: '长度在3~20之间' }
  ],
  password: [
    { required: true, trigger: 'blur', message: '密码不能为空' },
    { min: 3, max: 20, trigger: 'blur', message: '长度在3~20之间' }
  ]
})

const loginForm = ref()
</script>

<template>
  <div class="login-container">
    <el-row>
      <el-col :span="12"></el-col>
      <el-col :span="12">
        <el-form :model="login_form" :rules="rules" ref="loginForm" class="login_form">
          <h2>后台管理</h2>
          <h4>阳光优选</h4>
          <el-form-item prop="name">
            <el-input type="text" placeholder="账号" v-model="login_form.name"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" placeholder="密码" v-model="login_form.password"> </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="login-btn" @click="nameAndPasswordLogin">
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.login-container {
  width: 100%;
  height: 100vh;
  background: url('../assets/imgs/login_back.png') center/cover no-repeat scroll;
  h2 {
    font-weight: 900;
    line-height: 1.1em;
    padding-bottom: 5px;
  }
  h4 {
    font-weight: 400;
    margin-bottom: 3px;
  }
  .login_form {
    position: relative;
    width: 40%;
    top: 90%;
    left: 40%;
  }
  .login-btn {
    width: 100%;
  }
}
</style>
